<!DOCTYPE HTML>

<head>
	<title> | untitled</title>

	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery.animate-enhanced.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen"> 
	@font-face { font-family: DIN; src: url('DINPro-Medium.otf'); } 

	#outerDiv {
		position:relative;

		width: 1024px;
		height:300px;     
		overflow: hidden;
		display: block;
		outline: none;
		background-color: rgb(50,50,55);
		margin-top:50px;
	}

	.box {
		position:absolute; 
		overflow: hidden;
		/*		font-family:  Helvetica, sans-serif;  */
		font-family: DIN;  
		font-size: 1.5em;
		font-weight: bold;
		letter-spacing: -0.15em;
		padding: 10px;
		color: #fff; 
		/*		border: 5px solid #999;*/
		-moz-user-select: none;
		-webkit-user-select: none;

		-webkit-text-fill-color: white;
		//  background-color: rgb(250,95,2);
		opacity:0.6;
		/*		-webkit-transition: all 0.4s ease-out;*/
		/*		-moz-transition: all 0.4s ease-out;*/
	}

	.box:hover{
		opacity:1;
		/*		-webkit-transition: all 0.4s ease-out;*/
		/*		-moz-transition: all 0.4s ease-out;*/


	}

	.yo {


		background-color: rgb(50,50,55);
		margin-top:50px;
	}





	</style>	






</head>
<body>


	// var who = $(this).prevAll(".box:nth-child(3n+"+((this.id%3)+1)+")").each(function(index) {
		// ((i%3) * 100 ) + "px";    

		<div id="outerDiv" >

		</div>
		<script type="text/javascript">
		var moved = false; 
		var which = 0;
		var nereye1,nereye2,nereye3,nereye4;
		function move(i){
			if(!moved){
				switch((i.id%3)){
					case 0:  
					// console.log( $(i).innerWidth() + parseInt($(i).css('left')) );
					
					// var nereye = $(i).innerWidth() + parseInt($(i).css('left')) + 200;
				    nereye1 = $(i).innerWidth() + (parseInt($(i).css('left')) - parseInt($(i).next().css('left')) ) + 200;
				    nereye2 = $(i).innerWidth() + (parseInt($(i).css('left')) - parseInt($(i).next().next().css('left')) ) + 200;
				    nereye3 =  ( parseInt($(i).css('left')) - parseInt($(i).prev().prev().css('left')) ) - ($(i).prev().prev().innerWidth() ) ;
				    nereye4 =  ( parseInt($(i).css('left')) - parseInt($(i).prev().css('left')) ) - ($(i).prev().innerWidth() ) ;
                     
					// console.log(nereye ); 
					
					
					$(i).nextAll("div:nth-child(3n+1)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+2)").animate({left: "+="+nereye1,leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+3)").animate({left: "+="+nereye2,leaveTransforms:false }, 500 );  
					
					$(i).prevAll("div:nth-child(3n+2)").animate({left: "+="+nereye3,leaveTransforms:false }, 500 );
					$(i).prevAll("div:nth-child(3n+3)").animate({left: "+="+nereye4,leaveTransforms:false }, 500 );
					
					
					$(i).animate({ width:'+=200px',  height:'+=200p', leaveTransforms:false, useTranslate3d:true  },600);
					// $(i).animate({  top:'0px'  ,  height:'+=200p',  leaveTransforms:false, useTranslate3d:true  },600).delay(600); 
					// console.log(parseInt($(i).css('left')) );
					
					moved = true;    
					break;
					
					case 1:
					console.log($(i).innerWidth()+"     " +$(i).scrollLeft());
					$(i).nextAll("div:nth-child(3n+1)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+2)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+3)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).animate({ width:'+=200px',leaveTransforms:false, useTranslate3d:true  },600);
					$(i).animate({  top:'0px'  , height:'+=200p',leaveTransforms:false, useTranslate3d:true  },600).delay(600);
					moved = true;    
					break;
					
					case 2:
					console.log($(i).innerWidth()+"     " +$(i).scrollLeft());
					$(i).nextAll("div:nth-child(3n+1)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+2)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).nextAll("div:nth-child(3n+3)").animate({left: '+=200',leaveTransforms:false }, 500 );
					$(i).animate({ width:'+=200px',leaveTransforms:false, useTranslate3d:true  },600);
					$(i).animate({  top:'0px'  ,  height:'+=200p', leaveTransforms:false, useTranslate3d:true  },600).delay(600);
					moved = true;    
					break;
					
				}      

			} else {      
				console.log($(i).innerWidth()+"     " +$(i).scrollLeft());

				var f = which.id;
				$(which).animate({width:'-=200p', height:'-=200p', top:((f%3) * 100 ),leaveTransforms:false, useTranslate3d:true },200);

				$(which).nextAll("div:nth-child(3n+1)").animate({left: '-=200',leaveTransforms:false }, 400 );
				$(which).nextAll("div:nth-child(3n+2)").animate({left: "-="+nereye1,leaveTransforms:false }, 400 );
				$(which).nextAll("div:nth-child(3n+3)").animate({left: "-="+nereye2,leaveTransforms:false }, 400 );
				 
				$(i).prevAll("div:nth-child(3n+2)").animate({left: "-="+nereye3,leaveTransforms:false }, 400 );
				$(i).prevAll("div:nth-child(3n+3)").animate({left: "-="+nereye4,leaveTransforms:false }, 400 );
				moved = false;
			}

			which = i;


		}


		jQuery(document).ready(function() { 


			for (var i=0; i < 20; i++){

				var divizyon = document.createElement('div');
				divizyon.id = i;
				divizyon.innerHTML = i;

				var r = Math.floor(Math.random()*255);
				var g = Math.floor(Math.random()*255);
				var b = Math.floor(Math.random()*255);  

				var mo = "rgb(" + r +"," + g +"," +b+ ");";
				// console.log(mo);
				divizyon.style.backgroundImage = "url(ist/"+i+ ".jpg)"; 
				divizyon.style.backgroundPosition = "left top";
				//divizyon.style.backgroundColor = "rgb(" + r +"," + g +"," +b+ ")";
				divizyon.style.width = Math.floor(Math.random()*120)+80 + "px";
				// console.log(Math.floor(Math.random()*40)+180);
				divizyon.style.height = "80px"; 

				if(i%3==2){
					divizyon.style.height = "150px"; 
					divizyon.style.backgroundPosition = "left bottom";

				} else if (i%3==1){
					divizyon.style.backgroundPosition = "left center"; 
				}

				divizyon.style.top = ((i%3) * 100 ) + "px";
				divizyon.style.left = 0 + "px"; // (Math.floor(i/3) * 140) + "px";
				divizyon.style.position = "absolute";
				divizyon.className = "box";





				$("#outerDiv").append(divizyon);
			}    


			$('.box').each(function(index) {
				// console.log(this.id);

				if(this.id > 2){  

					var total = 0;
					var kac  = this.id - 3  ;

					var who = $(this).prevAll(".box:nth-child(3n+"+((this.id%3)+1)+")").each(function(index) {
						// $(this).css("opacity",1);
						// console.log(this);
						total = total + $(this).innerWidth();

					});

					// var who = $(".box:eq("+kac+")");
					// var en = who.outerWidth();
					// var sol = who.scrollLeft();
					// .outerWidth()  ;
					// console.log(total);
					// $(this).css("left",total);
					// $(this).animate("left",total);   
					$(this).animate({left:total, leaveTransforms:false },i*10).delay(200);



				}                               
				// console.log( $(this).prev("div:nth-child()").text() );
				// $(i).nextAll("div:nth-child(3n+1)").
			});    





			$('#outerDiv > div').click(function() {
				// console.log(this.id);
				// $(this).prevAll().animate({left: '-=200'}, 1000 );

				move(this);

			});

		});
		</script>




	</body>
	</html>